<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-card>
        <div>
          <div
            style="display: flex;
          flex-direction: column;
          align-items: center;"
          >
            <div>
              <h2>
                巨量引擎
              </h2>
            </div>
            <div style="padding-bottom: 10px;">
              <h1>上次授权时间:{{ hugeUserInfo }}</h1>
            </div>
            <div>
              <el-form
                :model="form"
              >
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="accredit(1)"
                  >授权->(授权成功请刷新此页面)</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-card>

      <!-- <div>微信</div> -->
      <el-card>
        <div>
          <div>
            <div
              style="display: flex;
              flex-direction: column;
              align-items: center;"
            >
              <div>
                <h2>
                  磁力引擎
                </h2>
              </div>
              <div style="padding-bottom: 10px;">
                <h1>上次授权时间:{{ kuaishouUserInfo }}</h1>
              </div>
              <div>
                <el-form>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="accredit(3)"
                    >授权->(授权成功请刷新此页面)</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script setup>
import EchartsLine from '@/view/dashboard/dashboardCharts/echartsLine.vue'
import DashboardTable from '@/view/dashboard/dashboardTable/dashboardTable.vue'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/pinia/modules/user'
import { useWeatherInfo } from '@/view/dashboard/weather.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  createQmAccessTokens,
  updateQmAccessTokens,
  findQmAccessTokens,
  getHugeInfo,
  getUserPlatform,
} from '@/api/qmAccessTokens'

defineOptions({
  name: 'Dashboard'
})

const hugeForm = reactive({
  link: 'https://open.oceanengine.com/audit/oauth.html?app_id=1806716056834058&state=your_custom_params&material_auth=1&rid=cpnvsq4hvnd',
})

const kuaishouForm = reactive({
  link: 'https://developers.e.kuaishou.com/tools/authorize?app_id=165907334&scope=%5B%22ad_query%22%2C%22ad_manage%22%2C%22report_service%22%2C%22public_dmp_service%22%2C%22public_agent_service%22%2C%22account_service%22%2C%22public_account_service%22%5D&redirect_uri=https://statistics.qingmanet.com/api/getAccessTokenCallback&state=abcd&oauth_type=advertiser',
})

const userStore = useUserStore()

const hugePlatformList = ref([])
const kuaishouPlatformList = ref([])
const getUserPlatformList = () => {
  getUserPlatform().then(res => {
    if (res.code == 0) {
      const list = JSON.parse(res.data)
      hugePlatformList.value = list.filter(item => item.platform_id == 1)
      kuaishouPlatformList.value = list.filter(item => item.platform_id == 3)
    } else {
      ElMessage({
        type: 'error',
        message: res.msg
      })
    }
  })
}

getUserPlatformList()

const hugeAccessToken = ref('')
const kuaishouAccessToken = ref('')
const getHugeAccessToken = () => {
  findQmAccessTokens({ platformId: 1 }).then(res => {
    if (res.code == 0) {
      hugeAccessToken.value = res.data.access_token || 'no'
      if (hugeAccessToken.value != 'no') {
        getHugeUserInfo()
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.msg
      })
    }
  })
}

const getKuaishouAccessToken = () => {
  findQmAccessTokens({ userId: userStore.userInfo.ID, platformId: 3 }).then(res => {
    if (res.code == 0) {
      kuaishouAccessToken.value = res.data.access_token || 'no'
      if (kuaishouAccessToken.value != 'no') {
        getKuaishouUserInfo()
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.msg
      })
    }
  })
}
getHugeAccessToken()
getKuaishouAccessToken()

const urlLink = ref('https://statistics.qingmanet.com/api/getAccessTokenCallback')
const copyLink = () => {
  navigator.clipboard.writeText(urlLink.value)
  ElMessage({
    type: 'success',
    offset: 200,
    message: '复制链接成功，可以粘贴',
  })
}

const accredit = (platformId) => {
  if (platformId == 1) {
    const newLink = hugeForm.link.replace('your_custom_params', userStore.userInfo.ID + '_' + 1)
    // 跳转到授权地址
    window.open(newLink)
  } else if (platformId == 3) {
    const newLink = kuaishouForm.link.replace('abcd', userStore.userInfo.ID + '_' + 3)
    // 跳转到授权地址
    window.open(newLink)
  }
}

const retry = (platformId) => {
  if (platformId == 1) {
    hugeAccessToken.value = 'no'
  } else if (platformId == 3) {
    kuaishouAccessToken.value = 'no'
  }
}

const hugeUserInfo = ref({
  info: {},
  extend: '',
})
const kuaishouUserInfo = ref({
  info: {},
  extend: '',
})
const getHugeUserInfo = async() => {
  const res = await getHugeInfo({ type: 'userInfo', params: '1' })
  hugeUserInfo.value = res.data.info
}

const getKuaishouUserInfo = async() => {
  const res = await getHugeInfo({ type: 'userInfo', params: '3' })
  kuaishouUserInfo.value = res.data.info
}

</script>

<style lang="scss" scoped>
.page {
    @apply p-0;
    .gva-card-box{
      @apply p-4;
      &+.gva-card-box{
        @apply pt-0;
      }
    }
    .gva-card {
      @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
      .gva-card-title{
        @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
      }
    }
    .gva-top-card {
        @apply h-72 flex items-center justify-between text-gray-500;
        &-left {
          @apply h-full flex flex-col w-auto;
            &-title {
              @apply text-3xl text-gray-600;
            }
            &-dot {
              @apply mt-4 text-gray-600 text-lg;
            }
            &-item{
              +.gva-top-card-left-item{
                margin-top: 24px;
              }
              margin-top: 14px;
            }
        }
        &-right {
            height: 600px;
            width: 600px;
            margin-top: 28px;
        }
    }
     ::v-deep(.el-card__header){
          @apply p-0  border-gray-200;
        }
        .card-header{
          @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
        }
    .quick-entrance-items {
      @apply flex items-center justify-center text-center text-gray-800;
        .quick-entrance-item {
          @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
          &:hover{
            @apply shadow-lg;
          }
            &-icon {
              @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
            }
            p {
                @apply mt-2.5;
            }
        }
    }
}
.dashboard-icon {
  @apply flex items-center text-xl mr-2 text-blue-400;
}

</style>
